import {StyleSheet} from 'react-native';

export default styles = StyleSheet.create({
  container: {backgroundColor: '#fff', flex: 1},
  topContainer: {
    paddingTop: 15,
    paddingBottom: 30,
    borderBottomLeftRadius: 40,
    borderBottomRightRadius: 40,
    backgroundColor: 'rgb(242, 242, 242)',
    flexDirection: 'row',
  },
  topLeft: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  name: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  sing: {
    fontSize: 13,
    color: '#D5D5D5',
  },
  avatarContainer: {
    alignSelf: 'center',
    marginRight: 20,
    marginBottom: 45,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
  },
  edit: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    width: 26,
    height: 26,
    borderWidth: 2,
    borderColor: '#fff',
    borderRadius: 13,
  },
  tagList: {
    marginTop: 40,
    flexDirection: 'row',
  },
  tag: {
    marginRight: 30,
    alignItems: 'center',
  },
  num: {
    fontSize: 20,
    fontWeight: '500',
  },
  tagName: {
    marginTop: 5,
    fontSize: 12,
    color: '#D5D5D5',
  },
  midContainer: {
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  midButton: {
    alignItems: 'center',
  },
  midButtonImg: {
    width: 32,
    height: 32,
  },
  midButtonTag: {
    marginTop: 5,
    fontSize: 12,
  },
  bottomBtnContainer: {
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  typeContainer: {
    flexDirection: 'row',
  },
  typeNameContainer: {
    width: 80,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#101010',
    justifyContent: 'center',
    alignItems: 'center',
  },
  typeName: {
    fontSize: 12,
    color: '#fff',
  },
  typeIconContainer: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'rgb(231, 231, 231)',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
  },
  typeIcon: {
    width: 16,
    height: 16,
  },
  addIconContainer: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'rgb(231, 231, 231)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  add: {
    width: 20,
    height: 20,
  },
});
